<template>
	<view>
		<view class="mm-header">
			<view class="mm-header-info flex f-a-center">
				<view class="flex f-a-center">
					<view class="mm-header-info-pic"><image :src="data.head_pic_text" mode="widthFix"></image></view>
					<view class="mm-header-info-name">{{data.nickname}}</view>
				</view>
				<!-- <navigator open-type="navigate" hover-class="none" url="/" class="mm-header-info-upgrade flex f-a-center f-j-center">
					<image src="../../../static/icons/jewel/material/m_upgrade.png" class="mm-header-info-upgrade-icon"></image>升级
				</navigator> -->
			</view>
			<!-- <view class="mm-header-waite flex f-a-center">
				<image src="../../../static/icons/jewel/material/m_waite.png" class="mm-header-waite-icon"></image>
				<view class="mm-header-waite-text">待用货款：￥5077.26</view>
			</view> -->
		</view>
		<view class="m-accounting">
			<view class="m-accounting-top flex f-a-center">
				<view class="flex f-a-center">
					<image src="../../../static/icons/jewel/material/m_wallet.png" class="m-accounting-top-icon"></image>
					<view class="m-accounting-top-num">收益余额：￥{{data.franchise_benefit||0}}</view>
				</view>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/material/material_takecash?state=18" class="m-accounting-top-take flex f-a-center">立即退取<arrow size="36" direction="right" color="#434343"></arrow></navigator>
			</view>
			<view class="m-accounting-bottom flex f-a-center">
				<view class="m-accounting-bottom-item">
					<view class="m-accounting-bottom-item-num">{{data.current_month_franchise_benefit||0}}<text>元</text></view>
					<view class="m-accounting-bottom-item-text">本月收益</view>
				</view>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/material/material_not_expired" class="m-accounting-bottom-item">
					<view class="m-accounting-bottom-item-num">{{not_expired_benefit}}<text>元</text></view>
					<view class="m-accounting-bottom-item-text">待作废收益</view>
				</navigator>
			</view>
		</view>
		<view class="m-funs flex f-a-center">
			<view class="flex f-a-center">
				<image src="../../../static/icons/jewel/material/m_kucun.png" class="m-funs-icon"></image>
				<view class="m-funs-num">剩余库存：<text>{{data.stock||0}}</text></view>
			</view>
		</view>
		<navigator open-type="navigate" hover-class="none" url="/pages/jewel/material/material_team" class="m-funs flex f-a-center">
			<view class="flex f-a-center">
				<image src="../../../static/icons/jewel/material/m_funs.png" class="m-funs-icon"></image>
				<view class="m-funs-num">我的粉丝：<text>{{data.fensi||0}}</text></view>
			</view>
			<view class="m-funs-view flex f-a-center">详情<arrow size="36" direction="right" color="#434343"></arrow></view>
		</navigator>
		<navigator open-type="navigate" hover-class="none">
			<image src="../../../static/icons/jewel/material/m_banner.jpg" mode="widthFix" class="m-banner"></image>
		</navigator>
		<view class="m-list">
			<view class="m-list-title">我的服务</view>
			<view class="m-list-cont flex">
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/material/material_reward" class="m-list-cont-item">
					<image class="m-list-cont-item-img" src="../../../static/icons/jewel/material/m_icon5.png"></image>
					<view class="m-list-cont-item-text">奖励明细</view>
				</navigator>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/material/material_freezing" class="m-list-cont-item">
					<image class="m-list-cont-item-img" src="../../../static/icons/jewel/material/m_icon4.png"></image>
					<view class="m-list-cont-item-text">冻结押金</view>
				</navigator>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/material/material_deposit" class="m-list-cont-item">
					<image class="m-list-cont-item-img" src="../../../static/icons/jewel/material/m_icon6.png"></image>
					<view class="m-list-cont-item-text">可退押金</view>
				</navigator>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/material/material_team" class="m-list-cont-item">
					<image class="m-list-cont-item-img" src="../../../static/icons/jewel/material/m_icon2.png"></image>
					<view class="m-list-cont-item-text">好友列表</view>
				</navigator>
				<navigator open-type="navigate" hover-class="none" url="/pages/jewel/material/material_orderlist" class="m-list-cont-item">
					<image class="m-list-cont-item-img" src="../../../static/icons/jewel/material/m_icon1.png"></image>
					<view class="m-list-cont-item-text">订单列表</view>
				</navigator>
				<navigator open-type="navigate" hover-class="none" url="/pages/user/notice?type=1" class="m-list-cont-item">
					<image class="m-list-cont-item-img" src="../../../static/icons/jewel/material/m_icon3.png"></image>
					<view class="m-list-cont-item-text">系统通知</view>
				</navigator>
			</view>
		</view>
		
		<!-- <view class="m-btns">
			<navigator open-type="navigate" url="/pages/jewel/material/material_reward" class="m-btns-item" hover-class="none">奖金退取</navigator>
			<navigator open-type="navigate" url="/pages/jewel/material/material_deposit" class="m-btns-item" hover-class="none">可退押金退取</navigator>
		</view> -->
		<view style="width: 100%; height: 40rpx;"></view>
	</view>
</template>
<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
                showPopup: false,
				showLoading: false,
				data: [],
				maker_num:0,
				takeList:[],
				historyList:[],
				errorMsg:'',
				not_expired_benefit:0
			};
		},
        methods: {
			togglePopup() {
			    this.showPopup = !this.showPopup;
			},
			getData(){
				let that = this
				uni.showLoading({
					title:'加载中'
				})
				jewel.get('agent_jewel/getInfo',{},true,function(res){
					uni.hideLoading()
					if(res.data.code == 0){
						that.data = res.data.data
						jewel.get('agent_jewel/getUnrecordedBenefitsState',{},true,function(res){
							that.not_expired_benefit = res.data.not_expired_benefit
						})
						uni.setNavigationBarTitle({
							title:that.data.daiyan_text
						})
					}else{
						jewel.showToast(res.data.msg)
						that.errorMsg = res.data.msg
					}
					
				});
				
			}
        },
        onLoad() {
			let that = this
			that.getData()
			
        },
		onNavigationBarButtonTap(e) {
		    if (e.index == 0) {
				if(this.data.show_yeji == 0 || !this.data.show_yeji){
					return false
				} 
				if(this.maker_num > 0){
					uni.navigateTo({
						url:'/pages/jewel/agent_jewel/level_center'
					})
				}else{
					jewel.showToast(this.errorMsg)
				}
		    }
		},
		onPullDownRefresh (){
			this.getData();
			uni.stopPullDownRefresh();
		}
	}
</script>
<style lang="scss">
	page{
		background-color: #f7f7f7;
		height: 100vh;
	}
	.flex{
		display: flex;
	}
	.f-a-center{
		align-items: center;
	}
	.f-j-center{
		justify-content: center;
	}
	.mm-header{
		position: relative;
		width: 100%;
		background-image: url(../../../static/images/jewel/material/header_bg.jpg);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100%;
		&-info{
			justify-content: space-between;
			padding: 40rpx 36rpx 75rpx 52rpx;
			&-pic{
				width: 140rpx;
				height: 140rpx;
				box-sizing: border-box;
				border: 2px solid #016815;
				background-color: #09741e;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 32rpx;
				image{
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					display: block;
				}
			}
			&-name{
				color: #FFFFFF;
				font-size: 40rpx;
			}
			&-upgrade{
				color: #171717;
				font-size: 32rpx;
				font-weight: bold;
				width: 160rpx;
				height: 52rpx;
				background-color: #FFFFFF;
				border-radius: 50px;
				box-shadow: 0 4rpx 0 rgba($color: #014c0b, $alpha: 0.58);
				&-icon{
					width: 34rpx;
					height: 34rpx;
					margin-right: 10rpx;
				}
			}
		}
		&-waite{
			height: 110rpx;
			background-image: linear-gradient(145deg, #035f06,  #2a9f2f);
			width: 686rpx;
			margin: 0 auto;
			border-radius: 10rpx 10rpx 0 0;
			&-icon{
				width: 46rpx;
				height: 46rpx;
				display: block;
				margin: 0 30rpx 0 28rpx;
			}
			&-text{
				color: #FFFFFF;
				font-size: 34rpx;
			}
		}
	}
	.m-accounting{
		width: 688rpx;
		margin: 0 auto{
			top: 34rpx;
		};
		box-shadow: 0 3px 8px rgba(181,181,181,0.32);
		border-radius: 10rpx;
		background-color: #FFFFFF;
		&-top{
			color: #232323;
			font-size: 34rpx;
			justify-content: space-between;
			border-bottom: 1px solid #ededed;
			margin: 0 2rpx;
			height: 86rpx;
			&-icon{
				width: 46rpx;
				height: 46rpx;
				display: block;
				margin: 0 10rpx 0 22rpx;
			}
			&-take{
				color: #434343;
				font-size: 32rpx;
				margin-right: 10rpx;
			}
		}
		&-bottom{
			height: 164rpx;
			text-align: center;
			&-item{
				flex: 1;
				&-num{
					color: #252525;
					font-size: 40rpx;
					font-weight: bold;
					text{
						font-size: 24rpx;
					}
				}
				&-text{
					color: #3e3e3e;
					font-size: 30rpx;
					padding-top: 12rpx;
				}
			}
		}
	}
	.m-funs{
		width: 688rpx;
		margin: 0 auto{
			top: 34rpx;
		};
		box-shadow: 0 3px 8px rgba(181,181,181,0.32);
		border-radius: 10rpx;
		background-color: #FFFFFF;
		height: 90rpx;
		justify-content: space-between;
		&-icon{
			width: 46rpx;
			height: 46rpx;
			display: block;
			margin: 0 10rpx 0 22rpx;
		}
		&-num{
			color: #3e3e3e;
			font-size: 34rpx;
			text{
				font-size: 36rpx;
				font-weight: bold;
				color: #eb4a4a;
			}
		}
		&-view{
			color: #434343;
			font-size: 32rpx;
			margin-right: 10rpx;
		}
	}
	.m-banner{
		width: 100%;
		margin-top: 34rpx;
	}
	.m-list{
		width: 688rpx;
		margin: 0 auto{
			top: 34rpx;
		};
		box-shadow: 0 3px 8px rgba(181,181,181,0.32);
		border-radius: 10rpx;
		background-color: #FFFFFF;
		&-title{
			background-image: url(../../../static/icons/jewel/material/m_service.png);
			background-repeat: no-repeat;
			background-position: left center;
			background-size: 46rpx 46rpx;
			background-position: 24rpx 24rpx;
			line-height: 98rpx;
			border-bottom: 1px solid #ededed;
			font-size: 36rpx;
			padding-left: 76rpx;
		}
		&-cont{
			flex-wrap: wrap;
			&-item{
				text-align: center;
				width: 228rpx;
				padding-bottom: 20rpx;
				padding-top: 20rpx;
				&-img{
					width: 64rpx;
					height: 64rpx;
				}
				&-text{
					font-size: 32rpx;
					padding-top: 6rpx;
					color: #3e3e3e;
				}
			}
		}
	}
	
	
	.m-btns{
		position: fixed;
		bottom: 18rpx;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
		padding-top: 20rpx;
		z-index: 9;
		&-item{
			width: 345rpx;
			height: 84rpx;
			color: #0aac2a;
			font-size: 36rpx;
			text-align: center;
			line-height: 84rpx;
			border-radius: 10rpx;
			border: 2px solid #0aac2a;
			margin: 0 7rpx;
			&:last-child{
				background-color: #0aac2a;
				color: #FFFFFF;
			}
		}
		
	}
	
</style>
